/*
 *
 * (c) Copyright Ascensio System SIA 2024
 *
 * This program is freeware. You can redistribute it and/or modify it under the terms of the GNU 
 * General Public License (GPL) version 3 as published by the Free Software Foundation (https://www.gnu.org/copyleft/gpl.html). 
 * In accordance with Section 7(a) of the GNU GPL its Section 15 shall be amended to the effect that 
 * Ascensio System SIA expressly excludes the warranty of non-infringement of any third-party rights.
 *
 * THIS PROGRAM IS DISTRIBUTED WITHOUT ANY WARRANTY; WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR
 * FITNESS FOR A PARTICULAR PURPOSE. For more details, see GNU GPL at https://www.gnu.org/copyleft/gpl.html
 *
 * You can contact Ascensio System SIA by email at sales@onlyoffice.com
 *
 * The interactive user interfaces in modified source and object code versions of ONLYOFFICE must display 
 * Appropriate Legal Notices, as required under Section 5 of the GNU GPL version 3.
 *
 * Pursuant to Section 7 § 3(b) of the GNU GPL you must retain the original ONLYOFFICE logo which contains 
 * relevant author attributions when distributing the software. If the display of the logo in its graphic 
 * form is not reasonably feasible for technical reasons, you must include the words "Powered by ONLYOFFICE" 
 * in every copy of the program you distribute. 
 * Pursuant to Section 7 § 3(e) we decline to grant you any rights under trademark law for use of our trademarks.
 *
*/

.sample-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 32px;
    margin: 0;
    margin-top: 32px;
}

.sample-info {
    display: flex;
    flex-direction: column;
    padding: 24px;
    height: 100%;
}

.sample-info p {
    color: #333;
}

.sample-example p {
    color: var(--color-text-tertiary-2);
}

.sample-example p:not(.name-example-sample):not(.block_more-sample) {
    margin: 0 0 12px;
}

.framework-sample-info {
    display: flex;
    flex-direction: column;
    padding: 24px;
    height: 100%;
}

.sample-example {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border-decimal);
    box-sizing: border-box;
    box-shadow: 0px 7px 25px rgba(85, 85, 85, 0.15);
    border-radius: 3px;
    padding: 24px;
    list-style-type: none;
    position: relative;
    padding: 0;
    transition: box-shadow 0.3s;
}

.sample-example.hidden {
    display: none;
}

.example-sample-img {
    height: 120px;
    margin: auto;
    background-position: 50% 50%;
    background-color: var(--color-bg-quinary);
}

.name-example-sample {
    margin: 0 0 12px 0;
}

.name-example-sample a {
    color: var(--color-text-secondary);
    font-weight: 700;
    text-decoration: none;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: -0.02em;
}

.block_more-sample {
    margin: auto 0 0;
}

@media screen and (max-width: 1024px) {
    .sample-block {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .example-img {
        background-size: 208px;
    }
}

@media screen and (max-width: 768px) {
    .sample-block {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (max-width: 592px) {
    .sample-block {
        grid-template-columns: repeat(2, 1fr);
        padding: 0;
    }

    .sample-example {
        max-width: 100%;
    }
}

@media screen and (max-width: 475px) {
    .sample-block {
        grid-template-columns: repeat(1, 1fr);
    }
}

.create-formal-document {
    background-image: url("img/docbuilder/samples/create-formal-document.svg");
    background-repeat: no-repeat;
}

.create-table-document {
    background-image: url("img/docbuilder/samples/create-table-document.svg");
    background-repeat: no-repeat;
}

.add-watermark {
    background-image: url("img/docbuilder/samples/add-watermark.svg");
    background-repeat: no-repeat;
}

.create-reports {
    background-image: url("img/docbuilder/samples/create-reports.svg");
    background-repeat: no-repeat;
}

.mail-merge-reception {
    background-image: url("img/docbuilder/samples/mail-merge-reception.svg");
    background-repeat: no-repeat;
}

.fill-spreadsheet {
    background-image: url("img/docbuilder/samples/fill-spreadsheet.svg");
    background-repeat: no-repeat;
}

.create-spreadsheet-chart {
    background-image: url("img/docbuilder/samples/create-spreadsheet-chart.svg");
    background-repeat: no-repeat;
}

.comment-errors {
    background-image: url("img/docbuilder/samples/comment-errors.svg");
    background-repeat: no-repeat;
}

.create-presentation {
    background-image: url("img/docbuilder/samples/create-presentation.svg");
    background-repeat: no-repeat;
}

.create-chart-presentation {
    background-image: url("img/docbuilder/samples/create-chart-presentation.svg");
    background-repeat: no-repeat;
}

.create-basic-form {
    background-image: url("img/docbuilder/samples/create-basic-form.svg");
    background-repeat: no-repeat;
}

.create-advanced-form {
    background-image: url("img/docbuilder/samples/create-advanced-form.svg");
    background-repeat: no-repeat;
}

.fill-form {
    background-image: url("img/docbuilder/samples/fill-form.svg");
    background-repeat: no-repeat;
}
